<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<head>
<script type="text/javascript">
	$.subscribe('chargerDetailCompte', function(event, data) {
	
		var grid = event.originalEvent.grid;
		var ligneId = grid.jqGrid('getGridParam', 'selrow');
		var membreId = grid.jqGrid('getCell', ligneId, 'id');
		
		var form = document.getElementById('afficherDetailMembre');
	
		if (form.idMembreSelectionne.value != membreId) {
			form.idMembreSelectionne.value = membreId;
			form.submit();
		}
	
	});
</script>
</head>
<s:div id="listeComptes">
	<s:fielderror />
	<s:actionmessage />
	<s:actionerror />
	<s:url var="remplirListeCompteAction" action="remplirListeComptes" />
	<s:text var="titreTableauCompte" name="comptes.comptes.titreTableau" />
	<sjg:grid gridModel="listeTableau" caption="%{titreTableauCompte}" dataType="json" href="%{remplirListeCompteAction}"
			pager="true" pagerInput="false" rownumbers="true" rowList="10,20,30" rowNum="10" viewrecords="true" autowidth="true"
			hidegrid="true" onSelectRowTopics="chargerDetailCompte">
		<s:text name="id" var="titreId" />
		<sjg:gridColumn name="id" key="true" index="id" title="%{titreId}" hidden="true" />
		<s:text var="titreSurnom" name="membreTableau.surnom.titre" />
		<sjg:gridColumn name="surnom" index="surnom" title="%{titreSurnom}" cssStyle="width:100px;" />
		<s:text var="titreTypeUtilisateur" name="membreTableau.typeUtilisateur.titre" />
		<sjg:gridColumn name="typeUtilisateur" index="typeUtilisateur" title="%{titreTypeUtilisateur}" cssStyle="width:100px;" />
		<s:text var="titreCommentaire" name="membreTableau.commentaire.titre" />
		<sjg:gridColumn name="commentaire" index="commentaire" title="%{titreCommentaire}" cssStyle="width:100px;" />
	</sjg:grid>
</s:div>
<s:div id="ajouterCompteDiv" cssStyle="margin-top:20px;">
	<s:text var="titreAjouterCompte" name="comptes.comptes.ajouterCompte.titrePanel" />
	<sj:accordion heightStyle="content" animate="true" collapsible="true" active="false">
		<sj:accordionItem title="%{titreAjouterCompte}">
			<table>
				<tr>
					<td>
						<s:form id="formAjouterMembre" action="ajouterMembre" validate="true">
							<s:text var="surnomLibelle" name="surnom" />
							<s:textfield label="%{surnomLibelle}" name="membreAjout.surnom" />
							<s:text var="utilisateurInterneLibelle" name="utilisateurInterne" />
							<s:checkbox label="%{utilisateurInterneLibelle}" name="membreAjout.utilisateurInterne" labelposition="left" cssStyle="align:left;" />
							<s:text var="loginLibelle" name="login" />
							<s:textfield label="%{loginLibelle}" name="membreAjout.login" />
							<s:text var="motDePasseLibelle" name="motDePasse" />
							<s:password label="%{motDePasseLibelle}" name="membreAjout.motDePasse" />
							<s:text var="motDePasseConfirmationLibelle" name="motDePasseConfirmation" />
							<s:password label="%{motDePasseConfirmationLibelle}" name="membreAjout.motDePasseConfirmation" />
							<s:text var="commentaireLibelle" name="commentaire"/>
							<s:textarea label="%{commentaireLibelle}" name="membreAjout.commentaire" cssStyle="width:97%;" />
						</s:form>
					</td>
					<td align="center" valign="middle" width="250px">
						<sj:a formIds="formAjouterMembre" button="true" buttonIcon="ui-icon-plusthick">
							<s:text name="commun.bouton.ajouter.titre" />
						</sj:a>
					</td>
				</tr>
			</table>
		</sj:accordionItem>
	</sj:accordion>
</s:div>
<s:div id="afficherDetailMembreDiv" cssStyle="margin-top:20px;">
	<s:form action="afficherDetailMembre">
		<s:hidden name="idMembreSelectionne" />
	</s:form>
	<s:if test="idMembreSelectionne != null">
		<s:form id="supprimerMembre" action="supprimerMembre">
			<s:hidden name="idMembreSelectionne" />
		</s:form>
		<sj:accordion heightStyle="content" animate="true" collapsible="true">
			<s:text var="titreDetailFacture" name="comptes.comptes.detailMembre.titrePanel" />
			<sj:accordionItem title="%{titreDetailFacture}">
				<table>
					<tr>
						<td>
							<s:form id="formModifierMembre" action="modifierMembre" validate="true">
								<s:hidden name="idMembreSelectionne" />
								<s:textfield label="%{surnomLibelle}" name="membreModif.surnom" />
								<s:checkbox label="%{utilisateurInterneLibelle}" name="membreModif.utilisateurInterne" labelposition="left" cssStyle="align:left;" />
								<s:textfield label="%{loginLibelle}" name="membreModif.login" />
								<s:password label="%{motDePasseLibelle}" name="membreModif.motDePasse" />
								<s:password label="%{motDePasseConfirmationLibelle}" name="membreModif.motDePasseConfirmation" />
								<s:textarea label="%{commentaireLibelle}" name="membreModif.commentaire" cssStyle="width:97%;" />
							</s:form>
						</td>
						<td align="center" valign="middle" style="min-width: 150px;">
							<sj:a formIds="formModifierMembre"
								button="true" buttonIcon="ui-icon-pencil" cssStyle="width:94%;">
								<s:text name="commun.bouton.modifier.titre" />
							</sj:a>
							<sj:a formIds="supprimerMembre"
								button="true" buttonIcon="ui-icon-closethick" cssStyle="margin-top:15px;width:94%;">
								<s:text name="commun.bouton.supprimer.titre" />
							</sj:a>
						</td>
					</tr>
				</table>
			</sj:accordionItem>
		</sj:accordion>
	</s:if>
</s:div>
